<template lang="pug">
  div
    .form-element-label.mr-4(style="display:inline-block" v-if="config&&config.label" :class="{'form-element-label-required':config&&config.required}") {{config.label}}
      //- el-form-item(v-if="config.label" :labelWidth="labelWidth" :label="config.label")
    .form-element-button(style="display:inline-block" v-if="config&&config.label" :class="{'float-right':config&&config.position==='right'}")
      //- slot(name="haveIcon")
      i.ml-2.mr-2(v-if="value&&config&&config.haveIcon" class="el-icon-success" style="color:#67C23A")
      el-button(@click="EditorShowClick"  type="primary" size="mini") {{editorShow?'收起':'展开'}}
    div.monaco-editor-box(v-if="!dialogVisible&&editorShow" :id="elId" :style="'font-size:15px;margin-left:'+ marginLeft +'px;width: calc(100% - '+ marginLeft +'px);height:'+ height")
      el-button.editor-size-button(icon="el-icon-zoom-in" @click="dialogOpen" v-if="!readonly&&!isDetailsPage&&!config.btnHidden")
    el-dialog.monaco-editor-dialog(:visible.sync="dialogVisible" width="60%" :close-on-click-modal="false" :append-to-body="true" :show-close="false" @close="dialogClose")
      div.label-title
        //- span(v-if="config.required" style="color: #f56c6c;margin-right: 4px;") *
        span {{config.label||config.title}}
        svg-icon.shouqi-svg(icon-class="收起" @click.native="dialogClose")
      div.monaco-editor-box(:id="elId" style="font-size:15px;width: 100%;height:700px")
      el-row.text-center(slot="footer" class="dialog-footer")
        el-button(size="mini" @click="dialogClose" type="primary") 关闭
</template>
<script>

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'

let idNum = 0

export default {
  props: ['config', 'value', 'readonly', 'isDetailsPage', 'size'],
  data() {
    return {
      elId: `monaco-editor-index${idNum++}`,
      monacoEditor: undefined,
      monacoEditorValue: undefined,
      marginLeft: (this.config ? this.config.marginLeft : 0) || 0,
      height: (this.config ? this.config.height : '300px') || '300px',
      // labelWidth: (this.config ? this.config.labelWidth : '90px') || '90px',
      dialogVisible: false,
      editorShow: !this.config.label,
      language: undefined
    }
  },
  created() {
    if (this.config.language === 'mySpecialLanguage') {
      this.language = this.elId + '-language'
    } else if (!this.config.language) {
      this.language = 'javascript' // 默认为js
    } else {
      this.language = this.config.language
    }
  },
  mounted() {
    // if (this.config.language === 'mySpecialLanguage') {
    //   // 注册自定义语言
    //   monaco.languages.register({ id: this.language })
    //   // 为该自定义语言基本的Token
    //   monaco.languages.setMonarchTokensProvider(this.language, vLang)
    //   // 为该语言注册一个语言提示器--联想
    //   monaco.languages.registerCompletionItemProvider(this.language, {
    //     provideCompletionItems: () => {
    //       var suggestions = vCompletion
    //       return { suggestions: suggestions }
    //     }
    //   })
    // }

    if (this.editorShow) {
      this.initMonaco(this.value)
    }
  },
  methods: {
    initMonaco(value) {
      let _this = this
      if (value === undefined) {
        value = ''
      }
      _this.monacoEditorValue = value
      this.monacoEditor = monaco.editor.create(document.getElementById(this.elId), {
        value: _this.monacoEditorValue + '',
        // language: this.config.language || 'javascript',
        language: this.language,
        theme: 'vs',
        lineNumbers: (_this.config ? _this.config.lineNumbers : 'on') || 'on',
        readOnly: this.readonly || this.isDetailsPage,
        scrollBeyondLastLine: false,
        minimap: { enabled: false }, // 代码块没有
        lineNumbersMinChars: 2
        // fontFamily: 'Arial'
        // fontSize: 16
        // verticalScrollbarSize: 17,//竖直方向滚动条
        // horizontalScrollbarSize: 10,//水平方向滚动条宽度
      })
      // 弹窗中编辑器宽度自适应
      window.onresize = () => {
        if (this.monacoEditor) {
          this.monacoEditor.layout()
        }
      }
      this.monacoEditor.onDidChangeModelContent(function (e) {
        let content = _this.monacoEditor.getValue()
        _this.$emit('input', content)
      })
    },
    dialogOpen() {
      let value = this.monacoEditor.getValue()
      this.dialogVisible = true
      if (this.monacoEditor) {
        this.monacoEditor.dispose()
        this.monacoEditor = undefined
      }
      this.$nextTick(() => {
        this.initMonaco(value)
      })
    },
    dialogClose() {
      let value = this.monacoEditor.getValue()
      if (this.monacoEditor) {
        this.monacoEditor.dispose()
        this.monacoEditor = undefined
      }
      this.$nextTick(() => {
        this.dialogVisible = false
        this.initMonaco(value)
      })
    },
    EditorShowClick() {
      if (!this.editorShow) {
        this.editorShow = true
        this.$nextTick(() => {
          this.initMonaco(this.value)
        })
      } else {
        if (this.monacoEditor) {
          this.monacoEditor.dispose()
          this.monacoEditor = undefined
        }
        this.editorShow = false
      }
    }
  },
  beforeDestroy() {
    if (this.monacoEditor) {
      this.monacoEditor.dispose()
    }
  }
}
</script>
<style lang="scss">
// 编辑器样式
// .minimap{
//   display: none;// 代码块
// }

// .current-line{
//   display: none!important;
// }

// .margin{
//   width:30px!important;
//   .margin-view-overlays{
//     width:30px!important;
//   }
// }
.monaco-editor{
  border: 1px solid #000;
  overflow: hidden;
  // box-sizing: content-box!important;
}

.folding{
  width:17px!important;
}
// .line-numbers{
//   width: 34px!important;
//   text-align: center!important;
// }
// .monaco-scrollable-element{
//   left: 40px!important;
//   width: calc(100% - 40px)!important;
// }

// .decorationsOverviewRuler{
//   width:22px!important;
// }

// line-height: 50px;
// background: #EDEFF2;
// padding: 0 30px;
.monaco-editor-dialog{
  .el-dialog{
    margin-top:10vh!important;
    .el-dialog__header{
      display:none;
    }
    .el-dialog__body{
      padding:0 10px 0px!important;
      // .line-numbers{
      //   width:100%!important;
      //   text-align: right;
      //   padding-right:6px;
      //   background:#E6E8EC;
      // }
    }
  }

}
.monaco-editor-box{
  position: relative;
  margin-top:10px;
  .editor-size-button{
    position: absolute;
    top: 1px;
    right: -1px;
    z-index: 99;
    font-size: 20px;
    padding: 0;
  }
}
</style>
<style lang="scss" scoped>
.label-title{
  line-height: 50px;
  height: 50px;
  width: calc(100% + 20px);
  margin-left: -10px;
  background: rgba(237,239,242,1);
  border-radius:4px 4px 0px 0px;
  color:#666666;
  padding: 0 10px;
  box-sizing: border-box;
  .shouqi-svg{
    cursor: pointer;
    font-size: 20px;
    color: #666;
    float: right;
    margin-top: 15px;
  }
}
.form-element-label{
  font-size: 13px;
  color:#666;
  &:before{
    content: '*' !important;
    color: #EF0000;
    opacity: 0;
    margin-right: 0px !important;
    display: inline-block;
    width: 10px;
  }
}
.form-element-label-required{
  &:before{
    opacity: 1!important;
  }
}
</style>
